import './index.scss'
// 请求
import {
    getConsult,
    searchConsult,
    changeConsult,
    deleteConsult
} from '@/utils/httpAllMethods/consultHttp.jsx'

import React, { useState, useEffect } from 'react';

import {
    Button,
    Form,
    Input,
    Space,
    Table,
    Modal,
    message,
    Select
} from 'antd';

import { ExclamationCircleFilled } from '@ant-design/icons';
import { useNavigate } from 'react-router-dom';

import PageName from '../../../../components/PageName/index.jsx';

// 日期格式转换
import { parseTime } from '@/utils/date.jsx'


const { confirm } = Modal;

const TradeConsult = () => {
    const navigate = useNavigate()

    // 表单
    const formRef = React.useRef(null);
    const [form] = Form.useForm();

    // 表格数据
    const [data, setData] = useState([])
    // 数据条数
    const [total, setTotal] = useState(1)
    // 页数
    const [currentPage, setCurrentPage] = useState(1)

    // 页面改变
    const onChange = (page) => {
        setCurrentPage(page.current);
    }

    // 获取数据
    const getData = () => {
        getConsult().then(res => {
            let tableData = res.data
            setData(tableData)
            setTotal(tableData.length)
        })
    }

    useEffect(() => {
        getData()
    }, [])

    // 清空
    const onReset = () => {
        formRef.current?.resetFields();
        getData()
        message.success('清空成功')
    };
    // 搜索
    const searchData = (params) => {
        if (params.consult_type == '全部') {
            params.consult_type = ''
        }
        if (params.consult_status == '全部') {
            params.consult_status = ''
        }

        searchConsult(params).then(res => {
            let tableData = res.data
            setData(tableData)
            setTotal(tableData.length)
            message.success(res.msg)
        })
    }

    // 添加
    const addData = () => {
        navigate('/home/AddTrade')
    }

    // 编辑
    const editData = (consult_id) => {
        navigate('/home/EditTrade', { state: { consult_id } })
    }

    // 发布
    const changeStatus = (consult_id) => {
        changeConsult({ consult_id }).then(res => {
            getData()
            message.success(res.msg)
        })
    }

    // 删除
    const deleteData = (consult_id) => {
        confirm({
            title: '确定删除该信息吗?',
            icon: <ExclamationCircleFilled />,
            okText: '确定',
            okType: 'danger',
            cancelText: '取消',
            onOk() {
                deleteConsult({
                    consult_id
                }).then(res => {
                    getData()
                    message.success(res.msg)
                })
            },
            onCancel() {
                message.warning('取消删除')
            },
        });
    }

    //表头
    const columns = [
        {
            title: '编号',
            dataIndex: 'consult_id',
            key: 'consult_id',
            align: 'center',
            render: (text, record, index) => index +(currentPage-1)*5+ 1
        },
        {
            title: '分类',
            dataIndex: 'consult_type',
            key: 'consult_type',
            align: 'center'
        },
        {
            title: '封面',
            dataIndex: 'consult_img',
            key: 'consult_img',
            align: 'center',
            render: (_, { consult_img }) => {
                return (
                    <img src={'/api' + consult_img} style={{ height: '50px' }}></img>
                )
            }
        },
        {
            title: '标题',
            dataIndex: 'consult_title',
            key: 'consult_title',
            align: 'center',
            width: '200px',
            render: (_, { consult_title }) => {
                return <div className="ant-table1-cell">
                    {consult_title}
                </div>
            }
        },
        {
            title: '状态',
            dataIndex: 'consult_status',
            key: 'consult_status',
            align: 'center'
        },
        {
            title: '发布者',
            dataIndex: 'publish_name',
            key: 'publish_name',
            align: 'center'
        },
        {
            title: '发布时间',
            dataIndex: 'publish_time',
            key: 'publish_time',
            align: 'center',
            render: (_, { publish_time }) => {
                if(publish_time != '' && publish_time != null){
                    return parseTime(publish_time, '{y}-{m}-{d} {h}:{i}:{s}')
                }else{
                    return publish_time
                }
                
            }
        },
        {
            title: '操作',
            key: 'operate',
            align: 'center',
            render: (_, record) => {
                if (record.consult_status == '发布') {
                    return (
                        <Space size="middle">
                            <a onClick={() => {
                                editData(record.consult_id)
                            }}>编辑</a>
                            <a onClick={() => {
                                deleteData(record.consult_id)
                            }}>删除</a>
                        </Space>
                    )
                } else {
                    return (
                        <Space size="middle">
                            <a onClick={() => {
                                editData(record.consult_id)
                            }}>编辑</a>
                            <a onClick={() => {
                                changeStatus(record.consult_id)
                            }}>发布</a>
                            <a onClick={() => {
                                deleteData(record.consult_id)
                            }}>删除</a>
                        </Space>
                    )
                }


            },
        },
    ];

    return (
        <>
            <PageName name='资讯管理' />
            {/* 操作 */}
            <header className='searchBox'>
                <Form
                    colon={false}
                    form={form}
                    layout='inline'
                    ref={formRef}
                    onFinish={searchData}
                    initialValues={{
                        consult_type: '全部',
                        consult_status: '全部',
                        consult_title: ''
                    }}
                >
                    {/* 资讯分类 */}
                    <Form.Item label="资讯分类" name="consult_type" style={{ minWidth: '200px' }}>
                        <Select>
                            <Select.Option value="全部">全部</Select.Option>
                            <Select.Option value="房产资讯">房产资讯</Select.Option>
                            <Select.Option value="政策解读">政策解读</Select.Option>
                            <Select.Option value="行业动态">行业动态</Select.Option>
                        </Select>
                    </Form.Item>
                    {/* 状态 */}
                    <Form.Item label="状态" name="consult_status" style={{ minWidth: '200px' }}>
                        <Select>
                            <Select.Option value="全部">全部</Select.Option>
                            <Select.Option value="发布">发布</Select.Option>
                            <Select.Option value="草稿">草稿</Select.Option>
                        </Select>
                    </Form.Item>
                    {/* 标题 */}
                    <Form.Item label="标题" name="consult_title">
                        <Input placeholder='请输入标题'/>
                    </Form.Item>
                    {/* 按钮 */}
                    <Form.Item>
                        <Button type="primary" htmlType="submit" >
                            搜索
                        </Button>
                        <Button htmlType="button" onClick={onReset} className='reset'>
                            清空
                        </Button>
                    </Form.Item>
                </Form>
                <Button type="primary" onClick={addData} className='addData'>
                    添加
                </Button>
            </header>

            {/* 表格 */}
            <Table columns={columns} dataSource={data} pagination={{
                defaultCurrent: 1, total, defaultPageSize: 5, hideOnSinglePage: true
            }} rowKey={(record) => record.consult_id} current={currentPage} onChange={onChange} />
        </>
    )
}



export default TradeConsult